import React, { useEffect, useState } from "react";
import {
  Card,
  Row,
  Col,
  Statistic,
  Avatar,
  Typography,
  Space,
  Button,
  List,
  Tag,
  Spin,
} from "antd";
import {
  UserOutlined,
  TeamOutlined,
  SafetyOutlined,
  SettingOutlined,
  NotificationOutlined,
  CheckCircleOutlined,
  ClockCircleOutlined,
  HistoryOutlined,
} from "@ant-design/icons";

const { Title, Paragraph } = Typography;

// 模拟异步获取统计数据
const fetchStats = () =>
  new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        { title: "用户数", value: 128, icon: <UserOutlined /> },
        { title: "角色数", value: 6, icon: <TeamOutlined /> },
        { title: "权限数", value: 20, icon: <SafetyOutlined /> },
        { title: "系统设置项", value: 12, icon: <SettingOutlined /> },
      ]);
    }, 800);
  });

const notices = [
  {
    title: "系统将于本周五晚23:00-24:00进行维护，请提前保存数据。",
    date: "2024-06-01",
    type: "维护",
  },
  {
    title: "新版本v2.0已上线，欢迎体验！",
    date: "2024-05-28",
    type: "公告",
  },
];

const todos = [
  { title: "审核新用户注册", status: "待处理" },
  { title: "备份数据库", status: "待处理" },
  { title: "更新系统文档", status: "已完成" },
];

const activities = [
  { action: "登录系统", time: "10分钟前" },
  { action: "编辑了角色权限", time: "30分钟前" },
  { action: "新增了用户admin2", time: "1小时前" },
];

const LIST_MAX_HEIGHT = 220;

const Home: React.FC = () => {
  const [stats, setStats] = useState<
    { title: string; value: number; icon: React.ReactNode }[]
  >([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchStats().then((data) => {
      setStats(
        data as { title: string; value: number; icon: React.ReactNode }[]
      );
      setLoading(false);
    });
  }, []);

  return (
    <div
      style={{
        padding: 24,
        minHeight: "100vh",
        boxSizing: "border-box",
        overflow: "hidden",
      }}
    >
      {/* 欢迎区 */}
      <Card style={{ marginBottom: 24 }}>
        <Space align="center">
          <Avatar size={64} icon={<UserOutlined />} />
          <div>
            <Title level={3} style={{ marginBottom: 0 }}>
              欢迎使用 React Admin 管理系统！
            </Title>
            <Paragraph type="secondary" style={{ marginBottom: 0 }}>
              祝你工作愉快，管理高效！
            </Paragraph>
          </div>
        </Space>
      </Card>

      {/* 数据概览 */}
      <Spin spinning={loading} tip="加载中...">
        <Row gutter={[24, 24]} style={{ marginBottom: 24 }}>
          {stats.map((item) => (
            <Col xs={24} sm={12} md={6} key={item.title}>
              <Card>
                <Statistic
                  title={item.title}
                  value={item.value}
                  prefix={item.icon}
                />
              </Card>
            </Col>
          ))}
        </Row>
      </Spin>

      <Row gutter={[24, 24]}>
        {/* 左侧 */}
        <Col xs={24} md={12}>
          <Card title="快捷入口" style={{ marginBottom: 24 }}>
            <Space wrap>
              <Button type="primary" icon={<UserOutlined />} href="/user">
                用户管理
              </Button>
              <Button type="primary" icon={<TeamOutlined />} href="/role">
                角色管理
              </Button>
              <Button
                type="primary"
                icon={<SafetyOutlined />}
                href="/permission"
              >
                权限配置
              </Button>
              <Button
                type="primary"
                icon={<SettingOutlined />}
                href="/settings"
              >
                系统设置
              </Button>
            </Space>
          </Card>

          {/* 待办事项 */}
          <Card title="待办事项" style={{ marginBottom: 24 }}>
            <List
              dataSource={todos}
              style={{ maxHeight: LIST_MAX_HEIGHT, overflowY: "auto" }}
              renderItem={(item) => (
                <List.Item>
                  <List.Item.Meta
                    avatar={
                      item.status === "已完成" ? (
                        <CheckCircleOutlined style={{ color: "#52c41a" }} />
                      ) : (
                        <ClockCircleOutlined style={{ color: "#faad14" }} />
                      )
                    }
                    title={item.title}
                  />
                  <Tag color={item.status === "已完成" ? "success" : "warning"}>
                    {item.status}
                  </Tag>
                </List.Item>
              )}
            />
          </Card>
        </Col>

        {/* 右侧 */}
        <Col xs={24} md={12}>
          <Card title="系统公告" style={{ marginBottom: 24 }}>
            <List
              dataSource={notices}
              style={{ maxHeight: LIST_MAX_HEIGHT, overflowY: "auto" }}
              renderItem={(item) => (
                <List.Item>
                  <List.Item.Meta
                    avatar={
                      <NotificationOutlined style={{ color: "#1890ff" }} />
                    }
                    title={item.title}
                    description={
                      <span>
                        <Tag color="blue">{item.type}</Tag>
                        <span style={{ color: "#888" }}>{item.date}</span>
                      </span>
                    }
                  />
                </List.Item>
              )}
            />
          </Card>

          <Card title="最近操作">
            <List
              dataSource={activities}
              style={{ maxHeight: LIST_MAX_HEIGHT, overflowY: "auto" }}
              renderItem={(item) => (
                <List.Item>
                  <List.Item.Meta
                    avatar={<HistoryOutlined style={{ color: "#13c2c2" }} />}
                    title={item.action}
                    description={
                      <span style={{ color: "#888" }}>{item.time}</span>
                    }
                  />
                </List.Item>
              )}
            />
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default Home;
